<template>
  <!-- 新建模板考核模板查看 -->
  <div class="app-container">
    <el-dialog :visible.sync="centerDialogVisible" width="90%" center @close="close">
      <h3 style="text-align: center; font-size: 20px">{{this.messageList.name}}</h3>
      <!--  ref="ruleForm"  model="ruleForm" -->
      <el-form :inline="true" class="demo-form-inline" style="text-align: center">
        <!-- 年度--季度下拉框 -->
        <el-row style="margin-top: 0px">
          <el-form-item>
            <span style="margin-right: 15px;font-weight: 800; font-size: 8px">年份</span>
            <el-select
              placeholder="请选择"
              :readonly="true"
              style="width:  100px;"
              v-model="ruleForm.years"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span
              style="margin-right: 15px;margin-left: 15px;font-weight: 800; font-size: 8px"
            >{{ this.messageList.assessTemplatePeriod==1?'月度': this.messageList.assessTemplatePeriod==2? '季度' : "年度"}}</span>
            <el-select
              placeholder="请选择"
              :readonly="true"
              style="width:  100px;"
              v-model="ruleForm.linear"
            ></el-select>
          </el-form-item>
        </el-row>
        <!-- 部门-填报时间-姓名-性别-职务 -->
        <el-row style="margin-top: -10px">
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">部门</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:  100px; margin-right: 15px"
              v-model="ruleForm.department"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">填报时间</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width: 100px; margin-right: 15px"
              v-model="ruleForm.times"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">姓名</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:   100px; margin-right: 15px"
              v-model="ruleForm.names"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px; font-weight: 800;font-size: 8px">性别</span>
            <el-select
              :readonly="true"
              placeholder="请选择"
              style="width:  100px; margin-right: 15px"
              v-model="ruleForm.sexs"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <span style="margin-right: 10px;font-weight: 800; font-size: 8px">职务</span>
            <el-select
              placeholder="请选择"
              :readonly="true"
              style="width: 100px"
              v-model="ruleForm.works"
            ></el-select>
          </el-form-item>
        </el-row>
        <!-- 政治品德 -->
        <!-- <el-row style="margin-left:11.8%;">
          <div style="font-size: 14px; text-align: start; display: flex;">
            <span
              style="
                display: block;
                margin-top: 2px;
                margin-right: 3px;
                width: 4px;
                height: 12px;
              background-color: blue;
              "
            ></span>
            <span style="font-weight: 800;">政治品德廉洁自律出勤情况</span>
          </div>
          <div style="width:86%;height:auto;margin-top:1%">
            <el-form-item style="margin-right:86%">
              <el-input type="textarea" :rows="6" placeholder="请填写..." style="width:713%;"></el-input>
            </el-form-item>
          </div>
        </el-row>-->
        <!-- 工作实绩 -->
        <el-row style="margin-left:8%;" v-for="item in this.messageList.norms" :key="item.index">
          <div style="font-size: 14px; text-align: start; display: flex;margin-top:2%">
            <span
              style="display: block;
                margin-top: 0px;
                margin-right: 3px;
                 width: 4px;
                 height: 18px;
                 background-color: blue;
                "
            ></span>
            <span style="font-weight: 800;font-size:18px">{{ item.name }}</span>
          </div>
          <el-row style="display:flex;align-items:center;overflow:auto;width:92.6%">
            <el-form-item
              :style="item.latitudeBeans.length == 1?'width:100%' : 'width:45rem'"
              style="display:flex; flex-direction: column;height:auto;margin-top:1%;margin-right:0.7%"
              v-for="(items, index) in item.latitudeBeans"
              :label="items.name"
              align="center"
              prop="assessorUserType"
            >
              <el-input
                :readonly="true"
                type="textarea"
                :style="item.latitudeBeans.length == 1?'width:100%' : 'width:100%'"
                style="margin-top:1%;"
                :rows="item.latitudeBeans.length == 1?10:5"
                v-for="res in items.content"
                v-model="res.specificContent"
                placeholder="请填写..."
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row style="border:0;margin-right:8%;margin-top:-1.5%">
            <el-col style="text-align:center;">
              <el-button
                :readonly="true"
                style="width:80px; position: relative;height:36px;"
                @click="applayaddRow(item.latitudeBeans,item)"
              >+</el-button>
              <el-button
                @click.native.prevent="applaydeleteRow(item.latitudeBeans,item)"
                :readonly="true"
                style="width:80px; position: relative;height:36px;"
              >-</el-button>
            </el-col>
          </el-row>
        </el-row>

        <!-- 考核流程 -->
        <el-row
          style="margin-left:11.8%;"
          v-for="(item1 ,index) in this.messageList.processes"
          :key="index"
        >
          <div style="font-size: 14px; text-align: start; display: flex;">
            <span class="liucheng">考核流程</span>
          </div>
          <el-row v-for="item2 in item1.processBeans" :key="item2.key">
            <el-row style="text-align:start;margin-top:2%">
              <span style="font-weight:800;font-size:16px">流程{{ item2.key}}:</span>
              <span style="font-weight:800;font-size:16px">&nbsp{{item2.name}}</span>
            </el-row>
            <div style="width:86%;overflow :auto;height:auto;margin-top:2%;margin-left:5%;">
              <el-row style="text-align:start;">
                <el-form-item label="评级:" class="yanse">
                  <el-select
                    :disabled="true"
                    placeholder="请选择"
                    style="width: 95px;margin-left:10px"
                    v-model="ruleForm.greade"
                  >
                    <el-option label="好" value="1"></el-option>
                    <el-option label="较好" value="2"></el-option>
                    <el-option label="一般" value="3"></el-option>
                    <el-option label="差" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row style="text-align:start;overflow :auto;height:auto;">
                <el-form-item label="意见:" class="yanse">
                  <el-input
                    :readonly="true"
                    style="background-color:#fff;height:auto;width:500%;margin-left:10px"
                    v-model="ruleForm.message"
                  ></el-input>
                </el-form-item>
              </el-row>
              <el-row style="text-align:start">
                <el-form-item label="签名:" class="yanse">
                  <el-button
                    style="background-color: rgba(219, 215, 215, 0.5);
                 border:none; color: #000;margin-bottom: 5px;margin-left: 10px;height: 30px;line-height: 5px;"
                  >盖签名</el-button>
                </el-form-item>
              </el-row>
              <el-row style="text-align:start">
                <el-form-item label="时间:" class="yanse">
                  <span class="deadline" style="margin-left:10px;">{{ gettime }}</span>
                </el-form-item>
              </el-row>
            </div>
          </el-row>
          <el-form-item>
            <el-button style=" color: #000; margin-bottom: 5px;">取消</el-button>
            <!-- @click="onSubmit" -->
            <el-button style=" background-color: rgb(76 106 248);color: #fff;margin-bottom: 5px;">提交</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="closeLooks()">取 消</el-button>
        <el-button type="primary" @click="sureLooks()">确 定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>
  
  <script>
import { lookMuBans } from "@/api2/kaohe";
export default {
  props: ["dataTypes"],
  data() {
    return {
      greade: "",
      formLabelWidth: "80px", //label-width
      deleteStyle: true, //删除维度按钮显示隐藏
      // 分页属性定义如下{
      // }
      //表格数据数组
      tableData: [],
      latitudeBeansd: [],
      assessTemplateId: "",
      tableColumns: { list: [], header: [] }, //维度数组
      //弹层数组
      ruleForm: {
        department: "",
        times: "",
        names: "",
        sexs: "",
        works: "",
        greade: "",
        years: "",
        linear: "",
        message: "", //意见
        assessorUserType: "", //被考核人类型
        //维度
        dynamicItem: [
          {
            key: "1",
            name: "",
            content: ""
          }
        ]
      },
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.dataTypes,
      gettime: "", //当前时间
      messageList: [],
      tableDatadialog: [], //表格数据
      centerDialogVisible: true
    };
  },
  computed: {
    //序列处理，递增，删除的序列数，不会再出现
    index() {
      let index =
        this.tableDatadialog &&
        this.tableDatadialog.length &&
        this.tableDatadialog[this.tableDatadialog.length - 1].index;
      return ++index;
    }
  },
  mounted() {
    this.lookMuBan();
    // this.currentTime();
  },
  methods: {
    inputVal(e) {
      console.log(e);
    },
    //获取模板数据

    async lookMuBan() {
      console.log(this.dataTypesTemp);
      let id = this.dataTypesTemp.rows.id;
      const type = this.dataTypesTemp.index;
      const res = await lookMuBans(id, type);
      console.log(res);
      this.messageList = res.data;
      this.messageList = res.data;
    },
    close() {
      this.centerDialogVisible = false;
      this.$emit("fatherMethod1");
    },
    closeLooks() {
      this.centerDialogVisible = false;
      this.$emit("fatherMethod1");
    },
    sureLooks() {
      this.centerDialogVisible = false;
      this.$emit("fatherMethod1");
    },
    // getTime() {
    //   var _this = this;
    //   let yy = new Date().getFullYear();
    //   var mm =
    //     new Date().getMonth() > 9
    //       ? new Date().getMonth() + 1
    //       : new Date().getMonth() == 9
    //       ? new Date().getMonth() + 1
    //       : "0" + (new Date().getMonth() + 1);
    //   var dd =
    //     new Date().getDate() < 10
    //       ? "0" + new Date().getDate()
    //       : new Date().getDate();
    //   let hh = new Date().getHours();
    //   let mf =
    //     new Date().getMinutes() < 10
    //       ? "0" + new Date().getMinutes()
    //       : new Date().getMinutes();
    //   let ss =
    //     new Date().getSeconds() < 10
    //       ? "0" + new Date().getSeconds()
    //       : new Date().getSeconds();
    //   _this.gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
    // },
    // currentTime() {
    //   setInterval(this.getTime, 1000);
    // },
    //    添加
    addValue(i, index) {
      // console.log(i, index);
      // let idx = i.latitudeBeans.length + 1;
      // i.latitudeBeans.push({
      //   content: null,
      //   key: idx,
      //   name: "11111"
      // });
      // return;
      this.tableDatadialog.push({
        index: this.index,
        startFrameType: []
      });
    },
    //    删除
    delValue(i) {
      this.$confirm("是否删除序列?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.tableDatadialog.splice(i, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>
  <style lang="scss" scoped>
.app-container {
  height: auto;
  margin: 15px;
}
.liucheng {
  margin-top: 4%;
  font-weight: 800;
  font-size: 18px;
  background-color: rgba(219, 215, 215, 0.5);
  line-height: 5px;
  height: 18px;
  width: 90px;
  border-radius: 5px 5px 0 0;
  text-align: center;
  margin-left: -15px;
}
::v-deep .el-input--suffix .el-input__inner {
  height: 18px;
  font-size: 8px;
  // padding: 0px 0px 0px 5px;
  border: none;
  border-radius: 0;
  background-color: rgba(219, 215, 215, 0.3);
}
::v-deep .el-input__icon {
  width: 14px;
}

::v-deep .el-popper[x-placement^="bottom"] {
  font-size: 8px;
  height: 25px;
  line-height: 5px;
}
::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}
::v-deep .el-form--inline .el-form-item__content {
  vertical-align: 0;
}
::v-deep .el-form-item__label {
  text-align: left;
  padding: 10px;
}
::v-deep .el-table--border th,
.el-table__fixed-right-patch {
  border: none;
}
::v-deep .el-table::before {
  background-color: #fff;
}
::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: #fff;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background-color: #fff;
}
::v-deep .el-input--suffix .el-input__inner {
  height: 32px;
  font-size: 14px;
  // padding: 0px 0px 0px 5px;
  border: none;
  border-radius: 5%;
  background-color: rgba(219, 215, 215, 0.3);
}
::v-deep .el-input__icon {
  width: 14px;
}

::v-deep .el-popper[x-placement^="bottom"] {
  font-size: 8px;
  line-height: 5px;
}
::v-deep .el-table td,
.el-table th.is-leaf {
  border: none;
}
::v-deep .el-form--inline .el-form-item__content {
  vertical-align: 0;
}
// ::v-deep .el-form--inline .el-form-item__label {
//   text-align: center;
//   color: #3b95ff;
//   height: 32px;
//   line-height: 10px;
//   background: #e7f2ff;
//   opacity: 1;
// }
::v-deep .el-form--inline .el-form-item__label {
  text-align: center;
  color: #000;
  height: 32px;
  line-height: 10px;
  background: #ccc;
  opacity: 1;
}
::v-deep .yanse {
  text-align: center;
  color: #000;
  height: 32px;
  line-height: 10px;
  opacity: 1;
}
::v-deep .el-form-item__label {
  padding: 10px;
}
::v-deep .el-table--border th,
.el-table__fixed-right-patch {
  border: none;
}
::v-deep .el-table::before {
  background-color: #fff;
}
::v-deep .el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: #fff;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background-color: #fff;
}
</style>
  